<%@page import="com.crm.util.DateUtil"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-contactshow</title>
	<%@ include file="include/head.jsp" %>
	<meta charset="UTF-8">
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
</head>
<body class="crm">
	
	<jsp:include page="include/top.jsp">
		<jsp:param value="contact" name="tag"/>
	</jsp:include>
	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span8">
				<div class="well screen">
					<div class="page-header header">
						
						<table style="width:100%;">
							<tbody>
								<tr>
									<td width="68" style="vertical-align:top;">
										<div class="contact-avatar-container" data="" data-id="774147">
											<c:choose>
												<c:when test="${contact.companyname == null }">
												<span style="display: inline-block;border:1px solid #CCCCCC;background: url(${basePath}/img/workxp_sprites.png;) no-repeat 0px 0px transparent; width: 55px; padding-top: 55px;font-size:1px"></span>
												</c:when>
												<c:otherwise>
													<span style="display: inline-block;border:1px solid #CCCCCC;background: url(${basePath}/img/workxp_sprites.png;) no-repeat -112px 0px transparent; width: 55px; padding-top: 55px;font-size:1px"></span>
												</c:otherwise>
											</c:choose>
										</div>
									</td>
									<td>
										<div class="right-links">
											<c:choose>
												<c:when test="${contact.companyname == null }">
												<a href="edit.action?id=${contact.id }&t=company" rel="tooltip" data-original-title="修改公司"><i class="icon icon-edit"></i></a>	
												</c:when>
												<c:otherwise>
												<a href="edit.action?id=${contact.id }&t=contact" rel="tooltip" data-original-title="修改联系人"><i class="icon icon-edit"></i></a>
												</c:otherwise>
											</c:choose>
										</div>
				
										${contact.name }
										<span>
											<c:if test="${contact.companyname != null }">
											公司:&nbsp;&nbsp;${contact.company.name }&nbsp;&nbsp;&nbsp;&nbsp;职位:&nbsp;&nbsp;${contact.title }<br>
											</c:if>
											微博:&nbsp;&nbsp;<a href="http://www.${contact.weibotype }/${contact.weibo }">@${contact.weibo }</a>
										</span>
									</td>
								</tr>
							</tbody>
						</table>
						
					<ul class="nav nav-tabs details-tab">
					  <li class="active">
						<a href="https://1343817168.workxp.info/people/774147#notes" data-toggle="tab">评论</a>
					  </li>
					  <li class="">
						<a href="https://1343817168.workxp.info/people/774147#chances" data-toggle="tab">
							业务机会 (1)
						</a>
					  </li>
					</ul>

					</div>
					<div class="live_search_spinner" behavior="spinner" id="parties_loading">
					  <div class="liner">
					    <h3>处理中...</h3>
					    <img src="${basePath }/img/indicator.gif" alt="WorkXP">
					  </div>
					</div>
					<div class="main" id="main">
						




<div class="tab-content">
  <div class="tab-pane active" id="notes">
  		<div>
				<form accept-charset="UTF-8" action="https://1343817168.workxp.info/notes" class="simple_form new_note" data-remote="true" id="note-form" method="post" novalidate="novalidate">
					<input id="from" name="from" type="hidden" value="Contact">
					<input id="note_parent_id" name="note[parent_id]" type="hidden">
					<input id="note_contact_id" name="note[contact_id]" type="hidden" value="774147">
					<input id="note_chance_id" name="note[chance_id]" type="hidden">
					<input id="note_kase_id" name="note[kase_id]" type="hidden">
		
		<div class="control-group text required">
			<div class="controls">
				<textarea class="text required content" cols="40" id="note_content" name="contactnote.content" rows="20"></textarea>
			</div>
		</div>
		


		<div class="new_note_form_basics">
			<div class="submit right">
				<input class="btn btn-primary" data-loading-text="处理中.." name="commit" type="button" value="保存" id="mybtn">
			</div>
			<div class="action">
				&nbsp;&nbsp;&nbsp;&nbsp;
			</div>
		</div>
	</form>
</div>

<script type="text/javascript" charset="utf-8">
	// auto_size_textarea('holder_', 'note_content_');  
	$(document).ready(function() {
		validate_form('#note-form', true);
		PendingAttachments.init(".attachment_container");
		// $('#note_content').focus()
		
	});
</script>
	
		<div class="modal hide" id="noteModal">
		<form accept-charset="UTF-8" action="#" class="simple_form new_schedule" data-remote="true" id="note_form" method="post" novalidate="novalidate">	
			
			<div class="modal-header">
				<a class="close" data-dismiss="modal">×</a>
				<h3>评论</h3>
			</div>
			
			<div class="modal-body">
				<div class="control-group string optional">
					<div class="controls">
						<textarea rows="5" cols="30" style="width:95%" id="notecontent"></textarea>
					</div>
				</div>
			
				<div class="control-group string optional">
				</div>
			</div>
			
			<div class="modal-footer" style="text-align:left;">
				<input class="btn btn-primary" name="commit" type="submit" value="提交" id="note2" data-dismiss="modal">
				<a href="#" class="btn" data-dismiss="modal">取消</a>
			</div>
		</form>
	</div>
	
	<table id="activities" class="table crm-table top no-hover" style="margin-bottom: 60px">
		<tbody id="mycontent">
			<tr id="firstcol"/>
			
			<c:forEach items="${contact.contactnoteList }" var="note">
				<c:if test="${note.fid == null }">
				<tr id="note-${note.id }" data="817114" data-from="Person" class="note">
				<td class="icon"><span class="sprite note"></span></td>
				<td>
					<div class="note-header">
						<div style="float:right">
							 <ul class="nav nav-pills">
							 		
									<li><a data-toggle="modal" href="#noteModal" data-backdrop="static" class="notecommit" rel="${note.id }">评论</a></li>
										
									
									<li>
									<a class="del-note" href="javascript:;" rel="${note.id }" title="删除">删除</a>
									</li>
							 </ul>
						</div>
						<div class="subject">
						<c:set value="${note.createtime }" var="time"></c:set>
						<%String time = (String)pageContext.getAttribute("time"); %>
						<%=DateUtil.getTime(time) %>
						</div>
						<div class="meta">	
						</div>
						<div class="meta">
						</div>
					</div>
					<div class="content">
							<p>${note.content }</p>
					</div>
					<div id="firstnote2${note.id }"></div>
					<c:forEach items="${contact.contactnoteList }" var="note2">
					<c:if test="${note2.fid != null && note2.fid == note.id }">
						<blockquote id="note2-${note2.id }">
						  ${note2.content }
						  <small>
							${note2.user.username }
							<c:set value="${note2.createtime }" var="time2"></c:set>
							<%String time2 = (String)pageContext.getAttribute("time2"); %>
							<%=DateUtil.getTime(time2) %>
							
						    <a href="javascript:;" title="删除" class="del-note2" rel="${note2.id }"><i class="icon-trash"></i></a>
						  </small>
						</blockquote>
					</c:if>	
					</c:forEach>
					
				</td>
			</tr>
			</c:if>
			</c:forEach>
			
			
	</tbody></table>

<style>
.meta {
	line-height: 26px;
}
.meta li span {
	padding: 4px 8px;
	font-weight:blod;
}
.meta	.nav-pills li a {
  padding: 4px 8px;
}
.meta .nav {
	margin-bottom: 0px;
}
</style>
<script>
	$(document).ready(function() {
		bind_regarding_event();
	});
</script>

  </div>
  <div class="tab-pane" id="people">
    
  </div>
  <div class="tab-pane" id="chances">
    <table class="table table-striped crm-table" id="chances">
		<tbody>
			<tr class="">
				<td>
					<h4>
						<a href="https://1343817168.workxp.info/chances/4524">sdsd</a>
					</h4>
				
					<div class="description">sddssd</div>
					<div class="price">
							<span style="background:#46647C" class="label">sds</span>
						￥12333.0
					</div>
					<div class="owner">由 lxb9066 负责</div>
				</td>
				<td class="actions date">
					<span class="label label-important">失败</span>
				</td>
			</tr>
		</tbody>
	</table>

	<a href="https://1343817168.workxp.info/chances/new?contact_id=774147" class="btn btn-primary">添加机会</a>
  </div>
  
</div>

					</div>
				</div>
			</div>
			
			<div class="span4 sidebar">
				<div id="tasks_div" class="well">
					<div class="title">
						<span>
							<a data-toggle="modal" href="#taskModal" data-backdrop="static">添加任务</a>
						</span>
						待办任务
					</div>
					<div id="upcoming_tasks">
						<div id="screen_body">
						
						<div class="tasks today">
						<legend>今天</legend>
						<div id="task_817118" class="task checkbox">
						<span class="task_hover">
								<div class="task_actions">
									<a href="https://1343817168.workxp.info/tasks/817118" class="icon icon-trash" data-confirm="您确定要删除这个任务吗？" data-method="delete" data-remote="true" rel="nofollow" title="删除这个任务"></a>
									<a href="https://1343817168.workxp.info/tasks/817118/edit?context=target&target_id=774147&target_type=Contact" class="edit" data-remote="true">编辑</a>
								</div>
							
							<input data-confirm="您确定要完成分配给 lxb9066 的任务吗？" id="task_done_817118" name="task_done" onclick="done_task(817118, 6641, 6641)" type="checkbox" value="1">

							gdffg
						</span>
						
						</div>
					</div>	
				</div>
			</div>
		</div>
		
				<div class="well" style="position: relative;height:250px ">
					<div class="title">
						<span>
							<a href="#">编辑</a>
						</span>
						联系信息
					</div>
					<img style="width:120px;height:120px;position: absolute;top: 60px;right: 30px;" alt="" src="/qrcode/${contact.qrcode }.png">
					<ul class="nav nav-list contacts">
							<li class="nav-header">邮箱</li>
							<li>
								<c:forEach items="${contact.mailList }" var="mail">
									<div>
									<a href="#">${mail.mail }</a>
									<c:choose>
										<c:when test="${mail.type == 'personal' }">
											<span>个人</span>
										</c:when>
										
										<c:when test="${mail.type == 'work' }">
											<span>工作</span>
										</c:when>
										
										<c:otherwise>
											<span>其他</span>
										</c:otherwise>
										
									</c:choose>
									</div>
								</c:forEach>
								
							</li>
							<li class="nav-header">电话</li>
							<li>
								<c:forEach items="${contact.telList }" var="tel">
									<div>
									<a href="#">${tel.tel }</a>
									<c:choose>
										<c:when test="${tel.type == 'office' }">
											<span>公司</span>
										</c:when>
										
										<c:when test="${tel.type == 'home' }">
											<span>家庭</span>
										</c:when>
										
										<c:otherwise>
											<span>其他</span>
										</c:otherwise>
										
									</c:choose>
									</div>
								</c:forEach>
								
							</li>
							<li class="nav-header">个人主页</li>
							<li>
								<c:forEach items="${contact.websiteList }" var="website">
									<div>
									<a href="#">${website.website }</a>
									<c:choose>
										<c:when test="${website.type == 'office' }">
											<span>公司</span>
										</c:when>
										
										<c:when test="${website.type == 'personal' }">
											<span>个人</span>
										</c:when>
										
										<c:otherwise>
											<span>其他</span>
										</c:otherwise>
										
									</c:choose>
									</div>
								</c:forEach>
								
							</li>
					</ul>
		</div>
		
		<div class="well">
		<div class="title">地址:<span id="address">${contact.address }</span></div>
		<div id="map" style="width:370px;height:400px"></div>
	</div>
	 <script type="text/javascript">
		var map;
		$(document).ready(function(){

			map = new GMaps({
					div: '#map',
					lat: 35.21801, 
					lng: 113.25026
			});

			
			GMaps.geocode({
			  address: $('#address').html(),
			  //address: "上海",
			  callback: function(results, status) {
				if (status == 'OK') {
				  var latlng = results[0].geometry.location;
				  map.setCenter(latlng.lat(), latlng.lng());
				  map.addMarker({
					lat: latlng.lat(),
					lng: latlng.lng()
				  });
				}
			  }
			});

		});
    </script>
		
		<div class="well">
			<div id="background_container">
				<div class="title">
				<span>
					<a href="https://1343817168.workxp.info/people/774147#" onclick="toggle_edit_background_info(true); return false;">编辑</a>
				</span>
				背景信息
			</div>
			<div id="background_info"><p>${contact.content }</p></div>
		</div>

  <div id="edit_background_container" style="display:none;">
  	<form accept-charset="UTF-8" action="https://1343817168.workxp.info/crm/update_background" data-remote="true" id="background_form" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="LiCqyBxvkBia+p639rso2ZNIWgYbjBCEam9xtrTjBOA="></div>
			<input id="target_type" name="target_type" type="hidden" value="Person">
			<input id="target_id" name="target_id" type="hidden" value="${contact.id }">
			<div class="control-group text optional">
				<label for="contact_others" class="text optional control-label"> 修改背景信息</label>
				<div class="controls">
					<textarea class="content" id="description" name="description" required="required"></textarea>
				</div>
			</div>
  		<div class="submit">
  			<input class="btn btn-primary" name="commit" type="submit" value="保存">
				<a class="btn" href="https://1343817168.workxp.info/people/774147#" onclick="toggle_edit_background_info(); return false;">取消</a>
  		</div>
</form>  </div>
</div>

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		validate_form("#background_form", true);
	});
	function toggle_edit_background_info(edit) {
		$('#background_container').toggle();
		$('#edit_background_container').toggle();
		if (edit) $('#description').focus();
	}
</script>
	



	<script type="text/javascript">
		$(document).ready(function() {
			var fid;
			//对联系人的评论
			$("#mybtn").click(function() {
				var content = $("#note_content").val();
				var contactid = $("#target_id").val();
				
				$("#note_content").val("");
				$.post("note/add.action",{"contactnote.content":content,"contactid":contactid},function(json)	{
					if(json.id != null) {
					$("#firstcol").after("<tr id=\"note-"+json.id+"\" data=\"817114\" data-from=\"Person\" class=\"note\"><td class=\"icon\"><span class=\"sprite note\"></span></td><td><div class=\"note-header\"><div style=\"float:right\"><ul class=\"nav nav-pills\"><li><a data-toggle=\"modal\" href=\"#noteModal\" data-backdrop=\"static\" class=\"notecommit\" rel=\""+json.id+"\">评论</a></li><li><a class=\"del-note\" href=\"javascript:;\" rel=\""+json.id+"\" title=\"删除\">删除</a></li></ul></div><div class=\"subject\">刚刚发布</div><div class=\"meta\"></div<div class=\"meta\"></div></div><div class=\"content\"><p>" + json.content +"</p></div><div id=\"firstnote2"+json.id+"\"></div></td></tr>");
					} else {
						$("#note_content").focus();
					}
				});
			});
			$("#note_content").ajaxError(function(event,request, settings){
			    alert("ajax请求出错");
			});
			
			$(".notecommit").live('click',function() {
				fid = $(this).attr("rel");
			});
			//对评论的评论
			$("#note2").click(function() {
				var content = $("#notecontent").val();
				var contactid = $("#target_id").val();
				$.post("note/add.action",{"contactnote.content":content,"contactid":contactid,"fid":fid},function(json) {
					$("#firstnote2"+fid).after("<blockquote id=\"note2-"+json.id+"\">"+json.content+"<small>"+json.user.username+"发布于刚刚<a href=\"javascript:;\" title=\"删除\" class=\"del-note2\" rel=\""+json.id+"\"><i class=\"icon-trash\"></i></a></small></blockquote>");
				}) ;
			});
			
			
			//删除评论
			$(".del-note").live('click',function(){
				var id = $(this).attr("rel");
				if(confirm("如果该评论还有评论，所有评论都会一并删除。 您确定要删除这个评论吗？")) {
					$.get("note/del.action",{"contactnote.id":id},function(reslut) {
						$("#note-"+id).fadeOut();
					});
				}
				
			});
			
			$(".del-note2").live('click',function(){
				var id = $(this).attr("rel");
				if(confirm("您确定要删除这个评论吗？")) {
					$.get("note/del.action",{"contactnote.id":id,"fid":"xx"},function(reslut) {
						$("#note2-"+id).fadeOut();
					});
				}
				
			});
		});
		
	</script>
	
	
</body>
</html>
